<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.js" ></script>
    <script>
        $(document).ready(function(){
            $("table tr:even").css("background-color", "rgba(255,0,0,0.2)")
            $("table tr:odd").css("background-color", "rgba(0,255,0,0.2)")
            // html === innerHTML
            console.info($("table tr:eq(1)").html());

            console.info($("table tr:gt(0)").size())
            console.info($("table tr:gt(0)").length)
            console.info($("table tr:gt(0)").html())
            // jq each   i是下标   n是每一个dom元素
            $("table tr:gt(0)").each(function(i, n) {
                console.info(i);
                // dom对象 转换成 jq对象  $(element) 
                console.info(n.innerHTML + "@" + $(n).html())
            })
            // innerHTML 可以自动转换html标签    innerText会字符本身
            console.info($("table tr:lt(1)").get(0).innerHTML)
            console.info($("table tr:lt(1)").get(0).innerText)

            // on（事件名， 事件回调）
            $("input[name='all']").on("change",function(){
                // prop 特殊属性有或没有（checked, selected,disabled, readonly ）
                let chk = $(this).prop("checked")
                $("input[name='newsletter']").prop("checked", chk);
            })
        })
    </script>
</head>
<body>
    <table>
        <tr><td>Header 1</td></tr>
        <tr><td>Value 1</td></tr>
        <tr><td>Value 2</td></tr>
    </table>
    <input type="checkbox" name="all" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    
</body>
</html>